<template>
	<view class="name-icon-color-components-container">
		<!-- 中间的明细信息 -->
		<view class="inner-container">
			<!-- 明细第一个 名字 -->
			<view class="inner-name-container">
				<view class="name-container-left">
					名称
				</view>
				<view class="name-container-right" :style="{width: nameLength + 'rpx'}">
					<u--input border="none" v-model="accountbook.name" placeholder="设置名字" @change="change('name')"></u--input>
				</view>
			</view>
			<!-- 明细第二个 图标 -->
			<view class="inner-icon-container" >
				<view class="name-container-left">
					图标
				</view>
				<view :class="['icon-container-right', 'iconfont', accountbook.icon]" v-if="accountbook.icon"  @click="openIconDialog"></view>
				<view style="font-size: 17rpx;" v-if="!accountbook.icon" @click="openIconDialog" >{{accountbook.icon ? '' : '点击选择'}}</view>
			</view>
			<!-- 明细第三个 颜色 -->
			<view class="inner-color-container" >
				<view class="name-container-left">
					颜色
				</view>
				<!-- 颜色盒子 -->
				<view class="color-container-right" @click="openColorDialog" v-if="accountbook.bgcColor" :style="{backgroundColor: accountbook.bgcColor}"></view>
				<view class="no-data-tip" style="font-size: 17rpx;" v-if="!accountbook.bgcColor" @click="openColorDialog" >{{accountbook.bgcColor ? '' : '点击选择'}}</view>
			</view>
			<!-- 明细第四个 预算 TODO 根据判断来实现是否显示（支出：显示，收入：不显示） -->
			<view class="inner-budget-container" v-if="accountbook.type != 'income'">
				<view class="name-container-left" >
					预算
				</view>
				<view class="name-container-right" :style="{width: budgetLength + 'rpx'}">
					<u--input border="none" type="number" placeholder="设置预算" v-model="accountbook.budget" @change="change('budget')"></u--input>
				</view>
			</view>
			<!-- 类型 -->
			<view class="inner-type-container" v-if="isShowbudget">
				<view class="type-container-left" >
					类型
				</view>
				<view class="type-container-right" > 
					<view @click="changeType(index)" :class=" ['type-class', {'select-type': item.type == (accountbook.type ? accountbook.type : 'pay')}]" v-for="(item, index) in typeList">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkStrType} from '@/util/regular/regular.js';
	export default {
		props: {
			isShowbudget: {
				type: Boolean,
				default: true
			},
			accountbook: {																	// 账本对象
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				nameLength: 30,													// 账本名字的长度（中文，英文，数字都不一样）
				budgetLength: 30,												// 账本名字的长度（中文，英文，数字都不一样）
				typeList: [
					{id: 1, name: '支出', selected: true, type: 'pay'},
					{id: 2, name: '收入', selected: false, type: 'income'}
				]
			}
		},
		methods: {
			/** 根据下标修改对应的selected的值
			 * @param {Object} index 下标
			 */
			changeType(index) {
				this.typeList.forEach((item, index1) => item.selected = index == index1);
				this.$emit("changeType", this.typeList[index].type);
			},
			/**
			 * 点击图标函数
			 */
			openIconDialog(){
				this.$emit("openIconDialog");
			},
			/**
			 * 点击颜色函数
			 */
			openColorDialog(){
				this.$emit("openColorDialog");
			},
			/** 输入框改变事件
			 * @param {Object} name 属性名字
			 */
			change(name) {
				if (name == "budget") {
					this.budgetLength = checkStrType(this.accountbook[name] ? this.accountbook[name] : '设置名字');
				} else if (name == "name") {
					this.nameLength = checkStrType(this.accountbook[name] ? this.accountbook[name] : '设置名字');
				}
				this.$emit("changeAccountbook", this.accountbook);
			},
		},
		mounted() {
			this.nameLength = checkStrType(this.accountbook && this.accountbook.name ? this.accountbook.name : '设置名字');
			this.budgetLength = checkStrType(this.accountbook && this.accountbook.budget ? this.accountbook.budget : '设置预算');
			this.bgcColor =  this.themeYellowColor;
		},
	}
</script>

<style lang="scss">
	.name-icon-color-components-container {
		width: 100%;
		height: 400rpx;
		// 明细盒子
		.inner-container {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			
			.inner-type-container {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				// 左边标题
				.type-container-left {
					width: 20%;
					height: 100%;
					font-size: 30rpx;
					font-weight: 100rpx;
					color: $fontColorPurple;
					line-height: 75rpx;
				}
				// 右边选择类型
				.type-container-right {
					width: 30%;
					height: 75%;
					font-weight: bold;
					background-color: $themeBgcLightGreyColor;
					border-radius: 30rpx;
					color: $typefaceGreyColor;
					font-size: 30rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 60rpx;
					.type-class {
						width: 50%;
						height: 100%;
					}
				}
				
				.select-type {
					border-radius: 30rpx;
					background-color: $themeYellowColor;
					color: $themePurpleColor;
				}
			}
			
			// 里面子项
			.inner-name-container, .inner-icon-container, .inner-color-container, .inner-budget-container {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				// 左边 
				.name-container-left {
					width: 20%;
					height: 100%;
					font-size: 30rpx;
					font-weight: 100rpx;
					color: $fontColorPurple;
					line-height: 75rpx;
				}
				
				// 右边
				.name-container-right {				
					padding: 0rpx 20rpx;
					height: 65%;
					font-size: 20rpx;
					font-weight: bold;
					background-color: #e6e6e6;
					border-radius: 30rpx;
					font-size: 30rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				// 图标盒子
				.icon-container-right {
					width: 60rpx;
					height: 75%;
					background-color: #e6e6e6;					
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40rpx;
					color: #989898;
					font-weight: bold;
				}
				
				// 颜色选择盒子
				.color-container-right {
					width: 60rpx;
					height: 75%;
					border-radius: 50%;
				}
			}
		}
	}
</style>
